<template>
  <div class="select-group flex">
    <el-select
      :class="isFocus ? 'is_focus' : ''"
      v-model="model"
      @focus="isFocus = true"
      @blur="isFocus = false"
    >
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      >
      </el-option>
    </el-select>
    <label class="label" :class="isFocus ? 'is_focus' : ''">{{ label }}</label>
  </div>
</template>

<script setup lang="ts" generic="T extends { value: string; label: string }">
withDefaults(defineProps<{ options: T[]; label: string }>(), {
  options: () => [],
  label: ''
})

const model = defineModel({ type: String, default: '' })

const isFocus = ref(false)
</script>

<style scoped lang="scss">
.select-group {
  position: relative;
  min-height: 52px;
  :deep(.el-select__wrapper) {
    height: 100%;
    border-radius: 8px;
    border: solid 1px var(--el-border-color-hover);
    box-shadow: none;
    font-size: 1rem;
    color: #919eab;
    padding-left: 1rem;
  }
  // :deep(.el-select__placeholder) {
  //   --el-input-text-color: #919eab;
  // }

  .label {
    position: absolute;
    top: 0;
    left: 1rem;
    color: #919eab;
    pointer-events: none;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-50%) scale(0.8);
    background-color: #fff;
    padding: 0 0.2em;
    font-weight: bolder;
  }

  .is_focus {
    :deep(.el-select__wrapper) {
      outline: none;
      border-color: var(--el-color-primary);
    }
  }

  .label.is_focus {
    color: var(--el-color-primary);
  }
}
</style>
